<template>
  <div class="market">
    <div class="ui_left_mask" :class="hiddenUI ? 'hiddenLeft' : ''">
      <div class="ui_left">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>内销合同态势</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftTopLineChart" width="100%" height="100%" :options="leftTopLineChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>外销合同态势</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftTwoBarChart" width="100%" height="100%" :options="leftTwoBarChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>内销应付款计划</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>供应商名称</span>
                <span>付款日期</span>
                <span>金额</span>
              </div>
              <div class="tableContent" v-if="leftOneTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in leftOneTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!leftOneTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="leftOneTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>外销应付款计划</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>供应商名称</span>
                <span>付款日期</span>
                <span>金额</span>
              </div>
              <div class="tableContent" v-if="leftTwoTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in leftTwoTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!leftTwoTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="leftTwoTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ui_right_mask" :class="hiddenUI ? 'hiddenRight' : ''">
      <div class="ui_right">
        <div class="nape_content">
          <div class="content_title">
            <span>各材料占比</span>
          </div>
          <div class="center_content">
            <div class="charts_box pseudoClass">
              <charts-chen container="rightTopPieChart" width="100%" height="100%" :options="rightTopPieChart"
                :isClick="true"></charts-chen>
            </div>
            <div class="list_box">
              <div class="pie_list" v-for="(item, index) in rightTopPieChart.series[0].data" :key="index">
                <div class="name">
                  <div class="circle" :style="'background:' + item.color"></div>
                  <span>{{ item.name }}</span>
                </div>
                <div class="rate" :style="'color:' + item.num">
                  <count-to :start-val="0" :end-val="Number(item.num || 0)" :duration="3000" :decimals="0" />
                  %
                </div>
                <div class="num">
                  <count-to :start-val="0" :end-val="Number(item.value || 0)" :duration="3000" :decimals="0" />
                  个
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>销售排行榜</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>姓名</span>
                <span>销售额</span>
              </div>
              <div class="tableContent" v-if="rightTwoTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightTwoTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightTwoTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightTwoTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>内销回款计划</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>客户名称</span>
                <span>付款日期</span>
                <span>付款金额</span>
              </div>
              <div class="tableContent" v-if="rightThreeTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightThreeTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightThreeTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightThreeTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>外销回款计划</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>客户名称</span>
                <span>付款日期</span>
                <span>付款金额</span>
              </div>
              <div class="tableContent" v-if="rightFourTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightFourTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightFourTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightFourTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { delay } from '../../utils';
import * as echarts from 'echarts';

export default defineComponent({
  props: {
    showUI: {
      type: Boolean
    }
  },
  components: {},
  setup (props) {
    const data = reactive({
      hiddenUI: false,
      rightTopPieChart: {
        tooltip: {
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#55c0ff'
            }
          },
          backgroundColor: 'rgba(24, 157, 247, 0.6)',
          textStyle: {
            color: 'white'
          }
        },
        calculable: false,
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '20%',
            top: 20,
            bottom: 20,
            width: '60%',
            // min: 0,
            // max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending', // 设置漏斗图方向
            gap: 4,
            legendHoverLink: false,
            labelLine: { //视觉引导线样式
              length: 10,
              lineStyle: {
                width: 0,
                type: 'solid'
              }
            },
            label: {
              formatter: () => {
                return '';
              },
              color: ['#CD6235'],
              fontSize: '8px'
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 10,
              normal: {
                color: (params: any) => {
                  const colorList = [
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#00e6a9' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#00e6a9' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#6EE7FA' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#6EE7FA' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#b6f971' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#b6f971' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#8a65e0' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#8a65e0' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            emphasis: {
              label: {
                fontSize: 10
              }
            },
            data: [
              { value: 5000, num: 50, name: '材料1', color: '#00e6a9' },
              { value: 2500, num: 25, name: '材料2', color: '#6EE7FA' },
              { value: 2000, num: 20, name: '材料3', color: '#b6f971' },
              { value: 500, num: 5, name: '材料4', color: '#8a65e0' }
            ]
          }
        ]
      },
      leftOneTable: {
        list: [
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 280, time: '2021.01.02' },
          { name: 'xxx', num: 360, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' }
        ],
        loading: true
      },
      leftTwoTable: {
        list: [
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 280, time: '2021.01.02' },
          { name: 'xxx', num: 360, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' }
        ],
        loading: true
      },
      rightTwoTable: {
        list: [
          { name: 'xxx', num: 300 },
          { name: 'xxx', num: 280 },
          { name: 'xxx', num: 360 },
          { name: 'xxx', num: 300 },
          { name: 'xxx', num: 300 }
        ],
        loading: true
      },
      rightThreeTable: {
        list: [
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 280, time: '2021.01.02' },
          { name: 'xxx', num: 360, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' }
        ],
        loading: true
      },
      rightFourTable: {
        list: [
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 280, time: '2021.01.02' },
          { name: 'xxx', num: 360, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' },
          { name: 'xxx', num: 300, time: '2021.01.02' }
        ],
        loading: true
      },
      leftTopLineChart: {
        tooltip: {
          show: true,
          backgroundColor: "rgba(24, 157, 247, 0.6)",
          textStyle: {
            color: "white",
          },
        },
        grid: {
          top: 20,
          left: 28,
          right: 10,
          bottom: 20
        },
        legend: {
          top: 0,
          right: 0,
          textStyle: {
            color: 'white',
            fontSize: 10
          },
          itemWidth: 20, // 宽
          itemHeight: 5 // 高
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#39608F',
            },
          },
          axisLabel: {
            color: '#fff',
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          boundaryGap: true,
        },
        dataset: {
          source: [
            ['一月', 65, 68],
            ['二月', 16, 15],
            ['三月', 24, 28],
            ['四月', 36, 35],
            ['五月', 36, 48],
          ]
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#39608F',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#d1e6eb',
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#39608F',
            },
          },
        },
        series: [
          {
            type: 'line',
            smooth: true,
            name: '利润',
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: '#2A74FF',
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              color: '#fff',
              offset: [0, -5]
            },

            itemStyle: {
              color: '#2A74FF',
              borderColor: '#fff',
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 6,
              shadowOffsetX: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(42, 116, 255, 0.2)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(42, 116, 255, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(0,179,244, 0.9)',
                shadowBlur: 20,
              },
            },
          },
          {
            type: 'line',
            name: '成本',
            smooth: true,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: '#FFE867',
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              color: '#fff',
              offset: [0, 36]
            },

            itemStyle: {
              color: '#FFE867',
              borderColor: '#fff',
              borderWidth: 2,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 1,
              shadowOffsetX: 1,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(254, 205, 54, 0.2)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(254, 205, 54, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(0,179,244, 0.9)',
                shadowBlur: 20,
              },
            },
          },
        ],
      },
      leftTwoBarChart: {
        tooltip: {
          show: true,
          backgroundColor: "rgba(24, 157, 247, 0.6)",
          textStyle: {
            color: "white",
          },
        },
        grid: {
          top: 30,
          left: 30,
          right: 10,
          bottom: 30
        },
        legend: {
          top: 0,
          right: 0,
          textStyle: {
            color: 'white',
            fontSize: 10
          },
          itemWidth: 20, // 宽
          itemHeight: 5 // 高
        },
        dataset: {
          source: [
            ['一月', 65, 68],
            ['二月', 16, 15],
            ['三月', 24, 28],
            ['四月', 36, 35],
            ['五月', 36, 48],
          ]
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,// 坐标轴两边留白
          axisLabel: {
            interval: 0,
            margin: 15,
            textStyle: {
              color: '#fff',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12,
            }
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.2
            }
          },
          splitLine: {
            show: false,
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12,
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#fff'],
              opacity: 0.06
            }
          }

        },
        series: [
          {
            type: 'bar',
            name: '利润',
            barWidth: 10,
            barGap: 0,
            label: {
              normal: {
                show: true,
                offset: [-10, null],
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                }, {
                  offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                }, {
                  offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
                }, {
                  offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
                }, {
                  offset: 0, color: 'rgba(104, 253, 255, 0.7)'
                }], false),
              },
            },
          },
          {
            type: 'bar',
            name: '成本',
            barWidth: 10,
            barGap: 0.3,
            label: {
              normal: {
                show: true,
                offset: [10, null],
                position: 'top',
                textStyle: {
                  color: '#a8aab0',
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, color: 'rgba(127, 128, 225, 0.7)'
                }, {
                  offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
                }, {
                  offset: 0.25, color: 'rgba(226, 99, 74, 0.7)'
                }, {
                  offset: 0, color: 'rgba(253, 200, 106, 0.7)'
                }], false),
              },
            },
          }
        ]
      },
    });

    onMounted(() => {
      nextTick(() => {
        delay(600).then(() => {
          data.rightTwoTable.loading = false;
        });
        delay(800).then(() => {
          data.leftOneTable.loading = false;
          data.rightThreeTable.loading = false;
        });
        delay(1000).then(() => {
          data.leftTwoTable.loading = false;
          data.rightFourTable.loading = false;
        });
      });
    });

    watch(() => props.showUI, (val) => {
      data.hiddenUI = val;
    });

    onUnmounted(() => {

    });

    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.market {
  width: 100%;
  height: 100%;
  user-select: none;

  .ui_left,
  .ui_right {
    pointer-events: auto;
    width: 95%;
    height: calc(100% - 10px);
    padding: 5px 10px;

    .nape_content {
      width: 100%;
      padding-bottom: 15px;

      .content_title {
        width: 100%;
        height: 35px;
        background: url('../../assets/img/contentTitle.png') no-repeat center;
        background-size: 100% 100%;

        span {
          margin-left: 40px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          line-height: 25px;
          background-image: -webkit-linear-gradient(top, rgb(238, 252, 255) 50%, #6ae4ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .center_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: calc(100% - 35px);
        margin-top: 5px;

        .table_box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          font-size: 14px;
          padding: 0 5px;

          .tableHead {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              width: 25%;
              font-size: 16px;
              text-align: center;
              color: #bde5fe;
            }
          }

          .tableContent {
            width: 100%;
            height: calc(100% - 36px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;

            .tableItem {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 3px 0;
              transform-origin: 0 100%;

              .textContent {
                overflow: hidden;
                width: 25%;
                line-height: 30px;
                height: 30px;

                span {
                  text-align: center;
                  display: inline-block;
                  width: 100%;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  transition: all 3s linear;
                  color: #6ae4ff;
                }
              }

              &:nth-child(odd) {
                background: rgba(255, 255, 255, 0.2);
              }

              &:hover {
                background: rgba(0, 174, 240, 0.6);

                .scrollText {
                  animation: scroll-left 3s linear infinite;
                  overflow: visible;
                }
              }

              @keyframes move_tableItem {
                0% {
                  transform: translateX(260px) skewX(-60deg);
                  opacity: 0;
                }

                100% {
                  transform: translateX(0px) skewX(0deg);
                  opacity: 1;
                }
              }

              @keyframes scroll-left {
                from {
                  transform: translateX(0);
                }

                to {
                  transform: translateX(-150%);
                }
              }
            }

            .active {
              background: rgba(0, 174, 240, 0.6);
            }
          }
        }

        .charts_box {
          width: 50%;
          height: 100%;
          margin-top: 10px;
          background: url('../../assets/img/charts_box.png') no-repeat center;
          background-size: 100% 100%;
        }

        .pseudoClass {
          position: relative;

          &::before {
            content: var(--title);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px solid #304157;
            box-shadow: 0 0 1px 1px #304157;
            height: 98%;
            aspect-ratio: 1 / 1;
            z-index: 9;
            pointer-events: none;
            color: #bfebfc;
            font-size: 12px;
            line-height: 218px;
            text-align: center;
          }

          &::after {
            content: var(--value);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 1px dashed #455365;
            box-shadow: 0 0 1px 1px #455365;
            height: 64%;
            aspect-ratio: 1 / 1;
            z-index: 9;
            pointer-events: none;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            line-height: 88px;
          }
        }

        .list_box {
          margin-left: 5px;
          width: 50%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;

          .listTotle {
            width: 100%;
            height: 24px;

            span {
              font-size: 18px;
              color: aliceblue;
              font-weight: 600;
              text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
            }
          }

          .pie_list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #97bccf;

            &>* {
              pointer-events: none;
            }

            .name {
              display: flex;
              align-items: center;
              width: 56%;

              .circle {
                width: 6px;
                height: 6px;
                border-radius: 10px;
                margin: 0 2px;
              }

              span {
                font-size: 15px;
                text-shadow: 0px 0px 1px #7cf6ff;
              }
            }

            .rate {
              width: 27%;
              text-align: center;

              span {
                font-size: 15px;
              }
            }

            .num {
              width: 27%;
              padding-right: 5px;
              text-align: center;
              white-space: nowrap;

              span {
                color: aliceblue;
                font-size: 15px;
              }
            }

            &:hover {
              cursor: pointer;
              background: linear-gradient(to left,
                  rgba(46, 117, 189, 0.8),
                  rgba(45, 130, 214, 0.8));
              border-left: outset 3px rgb(103, 179, 255);
            }
          }

          .active {
            background: linear-gradient(to left,
                rgba(46, 117, 189, 0.8),
                rgba(45, 130, 214, 0.8));
            border-left: outset 3px rgb(103, 179, 255);
          }
        }
      }
    }
  }
  .ui_left{
    .nape_content{
      height: 25%;
    }
  }
  .ui_right{
    .nape_content{
      height: 26%;
      &:nth-child(1){
        height: 20%;
      }
    }
  }
}
</style>
